<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<style>
	*{
		margin:0;
		padding:0;
		list-style: none;
	}

	#header{
		width: 18.421rem;          /* 设置宽度 */
	  	height:4.762rem;
		display:flex;
		align-items: center;
		justify-content: center;
		position:relative;
	}
	.diamond {
	  width: 100%;          /* 设置宽度 */
	  height:100%;          /* 向下移动，使得顶部与底部对齐 */
	  transform:skew(-30deg);
	  position: absolute;
	  top:0;
	  left:0;
	  box-shadow: 0.476rem 0.381rem 0.476rem 0 rgba(0, 0, 0, 0.5);
	}

	#section{
		display:flex;
		height:23.810rem;
		justify-content:center;
		position:relative;
		padding:2.381rem 0;
	}

	#section #information{
		width:9.524rem;
		height:19.048rem;
		position:absolute;
		top:50%;
		transform: translateY(-50%);
		left:2.381rem;
		display: flex;
		flex-direction: column;
	}

	#section #information .title{
		font-size:0.952rem;
		flex: 0 0 auto;
		font-weight: bold;
		text-align: center;
		padding:0.476rem 0;
	}

	#section #information ul{
		width:95%;
		flex: 1 1 auto;
		padding:0.476rem 2.5%;
		overflow-x: auto;
		-ms-overflow-style: none;  /* IE 10+ */
  		scrollbar-width: none;  /* Firefox */
  		box-shadow:
	     0.238rem 0.238rem 0.238rem #00000014,
	     0.238rem -0.238rem 0.238rem #00000014,
	     -0.238rem 0.238rem 0.238rem #00000014,
	     -0.238rem -0.238rem 0.238rem #00000014;
	}
 
	/* 针对WebKit浏览器隐藏滚动条 */
	.scrollable::-webkit-scrollbar {
	  display: none;
	}

	#section #information ul li{
		font-size:0.571rem;
		padding:0.143rem 0;
		cursor: pointer;
		color:rgb(54, 69, 55, 1);
		white-space: nowrap; /* 确保文本在一行内显示 */
	    overflow: hidden; /* 隐藏超出容器的部分 */
	    text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
	}

	#section #notice{
		width:9.524rem;
		position:fixed;
		top:0px;
		right:2.381rem;
		display: flex;
		flex-direction: column;
	}


	#section #notice .title{
		position:relative;
	}

	#section #notice .title>span:nth-child(1){
		display:block;
		font-size:0.952rem;
		font-weight: bold;
		text-align: center;
	}
	#section #notice .title>span:nth-child(2){
		font-size:0.571rem;
		font-weight: bold;
		position:absolute;
		right:0;
		bottom:0;
	}

	#section #notice ul{
		width:95%;
		height:11.905rem;
		padding:0.476rem 2.5%;
		overflow-x: auto;
		-ms-overflow-style: none;  /* IE 10+ */
  		scrollbar-width: none;  /* Firefox */
  		box-shadow:
	     0.238rem 0.238rem 0.238rem #00000014,
	     0.238rem -0.238rem 0.238rem #00000014,
	     -0.238rem 0.238rem 0.238rem #00000014,
	     -0.238rem -0.238rem 0.238rem #00000014;
	}

	#section #notice ul li{
		font-size:0.571rem;
		padding:0.143rem 0;
		cursor: pointer;
		color:rgb(54, 69, 55, 1);
		white-space: nowrap; /* 确保文本在一行内显示 */
	    overflow: hidden; /* 隐藏超出容器的部分 */
	    text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
	}

	#section #notice ul li>a{
			font-size:0.571rem;
	}


.button {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  border-width: 0;
  padding: 0 0.381rem 0.571rem;
  min-width: 10em;
  box-sizing: border-box;
  background: transparent;
  font: inherit;
  cursor: pointer;
  margin-top:0.476rem;
}

.button-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
  padding: 0.381rem 0.762rem;
  transform: translateY(0);
  text-align: center;
  color: #fff;
  text-shadow: 0 -0.048rem rgba(0, 0, 0, .25);
  transition-property: transform;
  transition-duration: .2s;
  -webkit-user-select: none;
  user-select: none;
}

.button:active .button-top {
  transform: translateY(0.286rem);
}

.button-top::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 0.190rem;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
/*  background-image: radial-gradient(#cd3f64, #9d3656); 最上面平面的按钮颜色*/
background-color: rgba(0,0,0,.5);
  text-align: center;
  color: #fff;
  box-shadow: inset 0 0 0px 0.048rem rgba(255, 255, 255, .2), 0 0.048rem 0.095rem 0.048rem rgba(255, 255, 255, .2);
  transition-property: border-radius, padding, width, transform;
  transition-duration: .2s;
}

.button:active .button-top::after {
  border-radius: 0.286rem;
  padding: 0 0.095rem;
}

.button-bottom {
  position: absolute;
  z-index: -1;
  bottom: 0.190rem;
  left: 0.190rem;
  border-radius: 0.381rem / 0.762rem 0.762rem 0.381rem 0.381rem;
  padding-top: 0.286rem;
  width: calc(100% - 0.381rem);
  height: calc(100% - 0.476rem);
  box-sizing: content-box;
  background-color: rgba(0,0,0,.7);
  background-image: radial-gradient(0.190rem 0.381rem at 0.190rem calc(100% - 0.381rem), rgba(255, 255, 255, .25), transparent), radial-gradient(0.190rem 0.381rem at calc(100% - 0.190rem) calc(100% - 0.381rem), rgba(255, 255, 255, .25), transparent), radial-gradient(0.762rem at -0.190rem 0, white, transparent), radial-gradient(0.762rem at calc(100% + 0.190rem) 0, white, transparent);
  box-shadow: 0px 0.095rem 0.143rem 0px rgba(0, 0, 0, 0.5), inset 0 -1px 0.143rem 0.143rem rgba(0, 0, 0, .4);
  transition-property: border-radius, padding-top;
  transition-duration: .2s;
}

.button:active .button-bottom {
  border-radius: 10px 10px 8px 8px / 8px;
  padding-top: 0;
}

.button-base {
  position: absolute;
  z-index: -2;
  top: 0.190rem;
  left: 0;
  border-radius: 0.571rem;
  width: 100%;
  height: calc(100% - 0.190rem);
  background-color: rgba(0, 0, 0, .15);
  box-shadow: 0 1px 1px 0 rgba(255, 255, 255, .75), inset 0 0.095rem 0.095rem rgba(0, 0, 0, .25);
}


	#section #content{
		width:33.333rem;
		border:1px solid #ccc;
		padding-bottom:0.476rem; 
		display:flex;
		flex-direction: column;
	}

	#content .form{
		display:flex;
		padding:0.476rem 0;
	}

	#content .form p{
		font-size: 0.667rem;
		padding-right:0.952rem;
		display:flex;
		align-items: center;
	}

	#content .form p input:focus{
		outline: none;
	}

	#content .form p:nth-child(2)>label{
		display:flex;
		border:1px solid #ccc;
	}

	#content .form p:nth-child(2)>label>input{
		border:none;
	}

	#content .form p input,#content .form p select{
		font-size: 0.667rem;
		width:4.762rem;
		height:1.190rem;
		border:1px solid #ccc;
		box-sizing: border-box;
		padding:0;
	}

	#content .form p>select{
			appearance: none;
	  -moz-appearance: none;
	  -webkit-appearance: none;
	  position: relative
	}

	#content .form p>select::after {
	  content: '▼';            /* 三角形字符 */
	  position: absolute;
	  right: 10px;             /* 从下拉框右侧偏移 */
	  top: 50%;                /* 在下拉框中垂直居中 */
	  transform: translateY(-50%); /* 对齐调整 */
	  pointer-events: none;     /* 使其不影响下拉功能 */
	}

	#content .form p .search{
		display: inline-block;
		cursor:pointer;
		width:1.190rem;
		height:1.190rem;
		background: url('./image/search.png') no-repeat left center;
    	background-size:100% 100%;
    	background-color:rgba(255, 255, 255, 0.2);
	}

	#content #TableBox{
		height:19.048rem;
		padding-right: 0.238rem;
		overflow-y: auto;
	}

		/* 设置滚动条整体，宽高 */
	#content #TableBox::-webkit-scrollbar{
		width:0px;
		height:0px;
	}

	#content #TableBox:hover{
		padding-right: 0px;
	}

	#content #TableBox:hover::-webkit-scrollbar{
		width:0.238rem;
		height:0.238rem;
	}

	/* 设置滚动条的轨道 */
	#content #TableBox::-webkit-scrollbar-track{
		background: white;
		border-radius:2px;
	}
	/* 设置滚动条里面的小方块 */
	#content #TableBox::-webkit-scrollbar-thumb{
		background: rgba(0,0,0,.2);
		border-radius:0.476rem;
	}


	#content table.tftable {font-size:0.571rem;color:#333333;width:100%;border-width: 1px;border-color: #a9a9a9;border-collapse: collapse;}
	#content table.tftable th {font-size:0.571rem;background-color:#ccc;border-width: 1px;padding: 0.381rem;border-style: solid;border-color: #a9a9a9;text-align:left;}
	#content table.tftable tr:nth-child(odd){background-color:#fff;}
	#content table.tftable tr:nth-child(even){background-color:#ccc;}
	#content table.tftable tr>td:nth-child(1){
		text-align:center;
	}
	#content table.tftable td {font-size:0.571rem;border-width: 1px;padding: 0.381rem;border-style: solid;border-color: #a9a9a9;}

	#content #fy{
		display:flex;
		align-items: center;
		padding-top:0.476rem;
		width:100%;
	}

	#content #fy input,#content #fy select{
		font-size: 0.667rem;
		height:1.190rem;
		border:1px solid #ccc;
		box-sizing: border-box;
		padding:0;
	}

	#content #fy input{
		width:4.286rem;
		text-align: center;
	}

	#content #fy input:focus{
		outline: none;
	}

	#content #fy select{
		display:block;
		width:1.905rem;
	}

	#content #fy .fy_list{display:flex;}

	#content #fy .fy_list>span{
		display: inline-block;
		width:1.190rem;
		cursor:pointer;
	}

	#content #fy .fy_list>span:hover{
		background-color:#ccc;
	}

	#content #fy .fy_list .first{
			background: url('./image/first_fy.png') no-repeat center;
			background-size:50% 50%;
				
	}
	#content #fy .fy_list .up{
			background: url('./image/up_fy.png') no-repeat center;
			background-size:50% 50%;
				
	}
	#content #fy .fy_list .down{
			background: url('./image/down_fy.png') no-repeat center;
			background-size:50% 50%;
				
	}
	#content #fy .fy_list .last{
			background: url('./image/last_fy.png') no-repeat center;
				background-size:50% 50%;
	}


	#content #fy .page_text{
		font-size:0.667rem;
		text-align: right;
		flex-grow: 1;
	}
	





</style>
<body>
	<header>
		<div id='header'>
			<div class='diamond'></div>
			<h2>网站标题</h4>
		</div>
	</header>
	<div id='section'>
		<div id='information'>
			<p class='title'>信息之窗</p>
			<ul>
				<li>设备的最大宽度设备的最大宽度123w21312x3123</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度设备的最大宽度</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度设备的最大宽度</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度设备的最大宽度</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度设备的最大宽度123w21312x3123</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度设备的最大宽度123w21312x3123</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度sacsa</li>
			</ul>
		</div>

		<div id='notice'>
			<p class='title'><span>通知公告</span><span>更多>></span></p>
			<ul>
				<li>设备的最大宽度设备的最大宽度</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度设备的最大宽度</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度设备的最大宽度123w21312x3123</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度设备的最大宽度</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度设备的最大宽度123w21312x3123</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度设备的最大宽度123w21312x3123</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度sacsa</li>
				<li>设备的最大宽度sacsa</li>
			</ul>

			<p id='login'>
				<button type="button" class="button">
			        <div class="button-top">登入注册</div>
			        <div class="button-bottom"></div>
			        <div class="button-base"></div>
			  </button>
			</p>
			<p id='contact'>
				<button type="button" class="button">
			        <div class="button-top">联系方式</div>
			        <div class="button-bottom"></div>
			        <div class="button-base"></div>
			  </button>
			</p>
			<p id='guide'>
				<button type="button" class="button">
			        <div class="button-top">操作指南</div>
			        <div class="button-bottom"></div>
			        <div class="button-base"></div>
			  </button>
			</p>
		</div>

		<div id='content'>
			<div class='form'>
				<p>类别：
					<select name='fl'>
						<option value=''>请选择</option>
						<option value=''>请选择</option>
						<option value=''>请选择</option>
					</select>
				</p>
				<p>关键字：<label><input type='text' name='key'><span class='search'></span></label></p>
			</div>


			<div id='TableBox'>
				<table class="tftable" id="myTable">
			    <thead>
			    	  <th style="width:20px;"></th>
			    	  <th>编程语言</th>
			    	  <th>编程语言</th>
			    </thead>
			    <tbody>
			      <tr>
			        <td>1</td>
			        <td>C</td>
			        <td>C</td>
			      </tr>
			      <tr>
			        <td>1</td>
			        <td>C</td>
			        <td>C</td>
			      </tr>
			      <tr>
			        <td>1</td>
			        <td>C</td>
			        <td>C</td>
			      </tr>
			      <tr>
			        <td>1</td>
			        <td>C</td>
			        <td>C</td>
			      </tr>
			      <tr>
			        <td>1</td>
			        <td>C</td>
			        <td>C</td>
			      </tr>
			      <tr>
			        <td>1</td>
			        <td>C</td>
			        <td>C</td>
			      </tr>
			      <tr>
			        <td>1</td>
			        <td>C</td>
			        <td>C</td>
			      </tr>
			      <tr>
			        <td>1</td>
			        <td>C</td>
			        <td>C</td>
			      </tr>
			      <tr>
			        <td>1</td>
			        <td>C</td>
			        <td>C</td>
			      </tr>
			      <tr>
			        <td>1</td>
			        <td>C</td>
			        <td>C</td>
			      </tr>
			      <tr>
			        <td>1</td>
			        <td>C</td>
			        <td>C</td>
			      </tr>
			      <tr>
			        <td>1</td>
			        <td>C</td>
			        <td>C</td>
			      </tr>
			      <tr>
			        <td>1</td>
			        <td>C</td>
			        <td>C</td>
			      </tr>
			      <tr>
			        <td>1</td>
			        <td>C</td>
			        <td>C</td>
			      </tr>
			      <tr>
			        <td>1</td>
			        <td>C</td>
			        <td>C</td>
			      </tr>
			    </tbody>
			  </table>
			</div>
			 

			  <div id='fy'>
			  	<p>
			  		<select>
			  			<option value='20'>20</option>
			  			<option value='20'>30</option>
			  			<option value='20'>40</option>
			  		</select>
			  	</p>
			  	<p class='fy_list'>
			  		<span class='first'></span>
			  		<span class='up'></span>
			  		<input name='page' value='1'/>
			  		<span class='down'></span>
			  		<span class='last'></span>
			  	</p>
			  	<p class='page_text'>
			  		显示<span class='start'>1</span>到<span class='end'>20</span>
			  		共<span class='count'>40</span>条记录
			  	</p>
			  </div>
		</div>

	</div>
</body>
</html>
<script>
	function setFontSize() {
	    const designWidth = 1200; // 设计稿的宽度
	    const maxWidth = 3000; // 设备的最大宽度
	    const baseFontSize = 18; // 基准字体大小
	    const screenWidth = window.innerWidth; // 当前屏幕宽度
	    const fontSize = (screenWidth / designWidth) * baseFontSize;
	    console.log(screenWidth);
	    console.log(fontSize);
	    console.log(`${fontSize > maxWidth ? maxWidth : fontSize}px`);
	    const font = Math.floor((fontSize > maxWidth ? maxWidth : fontSize)) +'px';
	    console.log(font);
	    document.getElementsByTagName('html')[0].style.fontSize = font;
	}
	window.addEventListener('resize', function(event) { 
		setFontSize();
	});
	
	window.onload=function(){
		setFontSize();
	}
</script>